<template>
	<view class="verify-page">

		<!-- 验证方式选择 (temporarily hidden) -->
		<!-- 
		<view class="verify-methods">
			<view class="method-item" :class="{ active: verifyMethod === 'scan' }" @tap="switchMethod('scan')">
				<u-icon name="scan" size="40" :color="verifyMethod === 'scan' ? '#2468f2' : '#666'"></u-icon>
				<text>扫码验证</text>
			</view>
			<view class="method-item" :class="{ active: verifyMethod === 'manual' }" @tap="switchMethod('manual')">
				<u-icon name="edit-pen" size="40" :color="verifyMethod === 'manual' ? '#2468f2' : '#666'"></u-icon>
				<text>手动输入</text>
			</view>
		</view> 
		-->

		<!-- 扫码验证区域 (commented out) -->
		<!-- 
		<view class="scan-area" v-if="verifyMethod === 'scan'">
			<view class="scan-box">
				<view class="scan-frame">
					<view class="scan-line"></view>
				</view>
				<view class="scan-tip">将二维码放入框内，即可自动扫描</view>
			</view>
			<button class="scan-btn" @tap="startScan">开始扫描</button>
		</view> 
		-->

		<!-- 手动输入区域 (always visible for now) -->
		<view class="manual-input">
			<view class="input-box">
				<input type="text" v-model="couponCode" placeholder="请输入卡券验证码" />
				<view class="input-tip">请输入卡券验证码</view>
			</view>
			<button class="verify-btn" @tap="verifyCouponCode">验证</button>
		</view>

		<!-- 验证结果弹窗 -->
		<u-popup v-model="showResult" mode="center" width="80%" border-radius="16">
			<view class="result-popup">
				<view class="result-icon">
					<u-icon :name="verifySuccess ? 'checkmark-circle' : 'close-circle'"
						:color="verifySuccess ? '#00c48f' : '#ff4d4f'" size="80"></u-icon>
				</view>
				<view class="result-title">{{ verifySuccess ? '验证成功' : '验证失败' }}</view>
				<view class="result-desc">{{ resultMessage }}</view>
				<view class="result-actions">
					<button class="result-btn" @tap="closeResult">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import request from '@/common/request.js';
export default {
	data() {
		return {
			// verifyMethod: 'scan', // Default to manual for now
			couponCode: '',
			showResult: false,
			verifySuccess: false,
			resultMessage: ''
		}
	},
	methods: {
		// switchMethod(method) {
		// 	this.verifyMethod = method
		// },
		// startScan() {
		// 	// 调用扫码接口
		// 	uni.scanCode({
		// 		success: (res) => {
		// 			this.couponCode = res.result
		// 			this.verifyCoupon()
		// 		},
		// 		fail: () => {
		// 			uni.showToast({
		// 				title: '扫码失败',
		// 				icon: 'none'
		// 			})
		// 		}
		// 	})
		// },
		verifyCouponCode() {
			if (!this.couponCode) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				return
			}
			this.verifyRequest()
		},
		async verifyRequest() {
			uni.showLoading({
				title: '验证中...'
			});

			try {
				const res = await request.httpTokenRequest({
					url: '/api/index/coupon?code=' + this.couponCode,
					method: 'GET',
					data: {
						code: this.couponCode
					}
				});

				uni.hideLoading();

				if (res.data.code === 1) {
					this.verifySuccess = true;
					this.resultMessage = res.data.msg || '验证成功';
				} else {
					this.verifySuccess = false;
					this.resultMessage = res.data.msg || '验证失败';
				}
				this.showResult = true;

			} catch (error) {
				uni.hideLoading();
				this.verifySuccess = false;
				this.resultMessage = '网络请求失败，请重试';
				this.showResult = true;
				console.error("Verification request failed", error);
			}
		},
		closeResult() {
			this.showResult = false
			if (this.verifySuccess) {
				// 验证成功后返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 300)
			}
		}
	}
}
</script>

<style lang="scss">
.verify-page {
	min-height: 100vh;
	background: #f8f8f8;
	padding: 24rpx;

	.verify-methods {
		display: flex;
		justify-content: space-around;
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 0;
		margin-bottom: 24rpx;

		.method-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #666;
			font-size: 28rpx;

			&.active {
				color: #2468f2;
			}

			text {
				margin-top: 12rpx;
			}
		}
	}

	.scan-area {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		text-align: center;

		.scan-box {
			position: relative;
			width: 500rpx;
			height: 500rpx;
			margin: 0 auto 40rpx;
			background: #f8f8f8;

			.scan-frame {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 400rpx;
				height: 400rpx;
				border: 4rpx solid #2468f2;
				overflow: hidden;

				.scan-line {
					position: absolute;
					width: 100%;
					height: 4rpx;
					background: #2468f2;
					animation: scan 2s linear infinite;
				}
			}

			.scan-tip {
				// position: absolute;
				// bottom: -60rpx;
				// left: 0;
				// right: 0;
				text-align: center;
				color: #666;
				font-size: 26rpx;
			}
		}

		.scan-btn {
			width: 80%;
			height: 88rpx;
			line-height: 88rpx;
			background: #2468f2;
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
		}
	}

	.manual-input {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx;

		.input-box {
			margin-bottom: 40rpx;

			input {
				width: 100%;
				height: 88rpx;
				background: #f8f8f8;
				border-radius: 44rpx;
				padding: 0 32rpx;
				font-size: 32rpx;
			}

			.input-tip {
				color: #999;
				font-size: 24rpx;
				margin-top: 12rpx;
				padding-left: 32rpx;
			}
		}

		.verify-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: #2468f2;
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
		}
	}

	.result-popup {
		padding: 40rpx;
		text-align: center;

		.result-icon {
			margin-bottom: 24rpx;
		}

		.result-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 16rpx;
		}

		.result-desc {
			color: #666;
			font-size: 28rpx;
			margin-bottom: 40rpx;
		}

		.result-actions {
			.result-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: #2468f2;
				color: #fff;
				border-radius: 44rpx;
				font-size: 32rpx;
			}
		}
	}
}

@keyframes scan {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(100%);
	}
}
</style>